<script setup lang='ts'>
import AMapLoader from '@amap/amap-jsapi-loader';

const state = defineModel<any>('state', { required: true })
const readonly = defineModel<string>('readonly', { required: false, default: '' } )

const showSearchList = ref(false)
window._AMapSecurityConfig = {
    securityJsCode:'3d2b0d182274c8f36d175015792a5525',
}

function openInfoWindow() {
    const infoWindow = new AMap.InfoWindow({
        // anchor: 'top-right', //信息窗体的三角所在位置
        content: `<h3 style="font-weight: bold;line-height: 32px">${state.value.address}</h3><h4>经度${state.value && state.value.longitude ? state.value.longitude : ''}，纬度${state.value && state.value.latitude ? state.value.latitude : ''}</h4>`, // 信息窗体的内容可以是任意html片段
        // 创建信息窗体
        isCustom: false, // 使用自定义窗体
        offset: new AMap.Pixel(0, 0),
    })
    infoWindow.open(map, [state.value && state.value.longitude ? state.value.longitude : '', state.value && state.value.latitude ? state.value.latitude : '']) // 填写想要窗体信息指示的坐标
}

let map: any = null // 初始化地图
function initMap() {
    AMapLoader.load({
        key: '8e125d7a61c3c334ca9538a5c6798582', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: [
            'AMap.Geocoder',
            'AMap.PlaceSearch',
            'AMap.Scale', // 工具条，控制地图的缩放、平移等
            'AMap.ToolBar', // 比例尺，显示当前地图中心的比例尺
            'AMap.Geolocation', // 定位，提供了获取用户当前准确位置、所在城市的方法
            'AMap.HawkEye', // 鹰眼，显示缩略图
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    }).then((AMap) => {
        map = new AMap.Map('mapBox', {
            center: [state.value && state.value.longitude ? state.value.longitude : '114.305215', state.value && state.value.latitude ? state.value.latitude : '30.592935'], // 初始化地图中心点位置
            doubleClickZoom: true, // 双击放大缩小
            dragEnable: true, // 禁止鼠标拖拽
            keyboardEnable: true, // 键盘控制放大缩小移动旋转
            scrollWheel: true, // 鼠标滚轮放大缩小
            viewMode: '3D', // 是否为3D地图模式
            // 设置地图容器id
            zoom: 16, // 初始化地图层级
        })
        map.setDefaultCursor('pointer') // default/pointer/move/crosshair
        map.addControl(new AMap.Scale()) // 异步同时加载多个插件
        map.addControl(new AMap.ToolBar())

        if (state.value.longitude && state.value.latitude) {
            const marker = new AMap.Marker({
                position: new AMap.LngLat(state.value.longitude, state.value.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
            });
            marker.on("click", (e) => {
                openInfoWindow()
            });
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
        }

        // 显示地图层级与中心点信息
        function logMapinfo() {
            const zoom = map.getZoom() // 获取当前地图级别
            const center = map.getCenter() // 获取当前地图中心位置
            // console.log(zoom, center)
        }
        // 绑定地图移动与缩放事件
        map.on('moveend', logMapinfo)
        map.on('zoomend', logMapinfo)

        // 为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', (e: any) => {
            state.value.longitude = e.lnglat.getLng()
            state.value.latitude = e.lnglat.getLat()
        })
    })
        .catch((e) => {
            console.log(e)
        })
}

// 搜索
function onPlaceSearch() {
    if(!state.value.address) return
    showSearchList.value = true
    // console.log('map', map)
    const placeSearch = new AMap.PlaceSearch({
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        map, // 展现结果的地图实例
        pageIndex: 1,
        pageSize: 4,
        panel: 'search-list-box', // 容器中
    })
    placeSearch.search(state.value.address, (status: any, result: any) => {
        console.log('status', status)
        console.log('placeSearch', result)
        if(status === 'error') {
            showSearchList.value = false
        }
    })

    placeSearch.on('listElementClick', (e: any) => {
        // console.log('onListElementClick', e)
        state.value.longitude = e.data.location.lng
        state.value.latitude = e.data.location.lat
        state.value.address = e.data.name
        showSearchList.value = false
    })
    placeSearch.on('markerClick', (e: any) => {
        // console.log('onMarkerClick', e)
        state.value.longitude = e.data.location.lng
        state.value.latitude = e.data.location.lat
        showSearchList.value = false
    })
}

onMounted(() => {
    initMap()
})

</script>

<template>
    <div class="content">
        <div class="flex">
            <el-input class="input" v-model="state.address" @keyup.enter="onPlaceSearch" :disabled="!!readonly" placeholder="请输入地址，或输入后点击查找并选择地址" />
            <el-button v-if="!readonly" type="primary" ml10 @click="onPlaceSearch">查找</el-button>
        </div>
        <div class="list" v-if="showSearchList">
            <div id="search-list-box" class="search-list-box" />
        </div>
        <div class="map" :style="'opacity: ' + (showSearchList ? 0.3 : 1)">
            <div id="mapBox" class="mapBox"></div>
        </div>

    </div>

</template>

<style lang="scss" scoped>
.content {
    position: relative;
    width: 100%;

    .input {
        width: 800px;
    }

    .list {
        position: absolute;
        top: 40px;
        z-index: 99;
        width: 800px;
    }

    .map {
        margin-top: 16px;

        .mapBox {
            border: 1px solid #ddd;
            width: 600px;
            height: 300px;
        }
    }
}
</style>